<div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header">
      <h1>发送邮件</h1>
    </div>
  </div>
</div>
<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
<div class="box box-primary">
  <div class="box-body">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="input-group">
          <mat-form-field appearance="fill">
            <mat-label>
              选择模板
            </mat-label>
            <mat-select name="selectedEmailTamplate" [(ngModel)]="selectedEmailTamplate"
              (selectionChange)="onTempateChange()">
              <mat-option *ngFor="let tamplate of emailTamplates" [value]="tamplate">
                {{tamplate.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </div>
    <form [formGroup]="emailForm">
      <div class="row">
        <div class="col-md-12 pb-1">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="toAddress">
                收件人
              </span>
            </div>
            <input formControlName="toAddress" type="text" class="form-control" placeholder="Comma separated emails"
              aria-label="To" aria-describedby="toAddress">
          </div>
          <div *ngIf="emailForm.get('toAddress').touched && emailForm.get('toAddress').errors">
            <div class="text-danger" *ngIf="emailForm.get('toAddress').errors?.required">
              收件人地址不能为空
            </div>
          </div>
        </div>
        <div class="col-md-12 pb-1">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="toAddress">
                抄送人
              </span>
            </div>
            <input formControlName="cCAddress" type="text" class="form-control" placeholder="Comma separated emails"
              aria-label="To" aria-describedby="toAddress">
          </div>
          <div *ngIf="emailForm.get('cCAddress').touched && emailForm.get('cCAddress').errors">
            <div class="text-danger" *ngIf="emailForm.get('cCAddress').errors?.required">
              抄送人地址不能为空
            </div>
          </div>
        </div>
        <div class="col-md-12 pb-1">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="subject">
                标题
              </span>
            </div>
            <input formControlName="subject" type="text" class="form-control" placeholder="Subject" aria-label="To"
              aria-describedby="subject">
          </div>
          <div *ngIf="emailForm.get('subject').touched && emailForm.get('subject').errors">
            <div class="text-danger" *ngIf="emailForm.get('subject').errors?.required">
              标题不能为空
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label class="font-weight-bold">
              正文
              <span class="text-danger"> ( Note:: 填充以下参数时，主体将自动更新. )</span>
            </label>
            <div class="NgxEditor__Wrapper">
              <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
              <ngx-editor [editor]="editor" formControlName="body">
              </ngx-editor>
            </div>
            <div *ngIf="emailForm.get('body').touched && emailForm.get('body').errors">
              <div class="text-danger" *ngIf="emailForm.get('body').errors?.required">
                正文不能为空
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12" formArrayName="parameters">
          <div class="row" *ngIf="parameters.controls.length>0">
            <div class="col-md-6 font-weight-bold">
              参数名
            </div>
            <div class="col-md-6 font-weight-bold">
              参数值
            </div>
          </div>
          <div *ngFor="let param of parameters.controls; let i=index" class="row mt-1">
            <ng-container [formGroupName]="i">
              <div class="col-md-6">
                <input readonly class="form-control" type="text" formControlName="parameter">
              </div>
              <div class="col-md-6">
                <input (focusout)="setParameterValue()" class="form-control" type="text" formControlName="value">
                <div *ngIf="param.get('value').touched && param.get('value').errors">
                  <div class="text-danger" *ngIf="param.get('value').errors?.required">
                    参数值不能为空
                  </div>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="col-md-12 mt-2">
          <div class="form-group">
            <label class="font-weight-bold"> 附件 </label>
            <div class="dropzone" appDragDrop (onFileDropped)="onFileDropped($event)">
              <input type="file" #fileDropRef id="fileDropRef" multiple
                (change)="fileBrowseHandler($event.target.files)" />
              <i class="text-danger fas fa-download fa-lg" aria-hidden="true"></i>
              <h3>拖动文件在这里删除</h3>
              <h3>或者</h3>
              <label for="fileDropRef">浏览文件</label>
            </div>
          </div>
        </div>
        <div class="col-md-12 mt-2">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center"
              *ngFor="let file of files; let i = index">
              <h4 class="name">
                {{ file?.name }} -- {{ formatBytes(file?.size) }}
              </h4>
              <span class="badge badge-pill">
                <button class="btn btn-danger" (click)="onDeleteFile(i)">
                  <i class="text-light fas fa-trash"></i>
                </button>
              </span>
              <div class="loading-shade" *ngIf="file?.progress">
                <mat-spinner></mat-spinner>
              </div>
            </li>
          </ul>
        </div>
        <div class="col-md-12 mt-1">
          <button (click)="sendEmail()" type="submit" class="btn btn-success">
            <i class="fas fa-paper-plane"></i>
            发送
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
